import { history, useModel, useRequest } from "@umijs/max";
import styles from "./style.less";
import { getUerInfo, removeToken } from "@/utils/info";
import React from "react";
import { BellOutlined, DownOutlined } from "@ant-design/icons";
import type { MenuProps } from "antd";
import { Badge, Dropdown, Space, Tooltip } from "antd";
import { logout } from "@/services/login";

export default () => {
  const {unCheckNumber} = useModel('global')
  const { userName, } = getUerInfo() || {};
  const { run: logoutFun } = useRequest(
    () =>
      logout(),
    {
      manual: true,
      onSuccess: (res) => {
        if (res instanceof Error) return
        history.push("/login");
        removeToken();
      },
    }
  );

  const items: MenuProps["items"] = [
    {
      key: "2",
      label: <span onClick={logoutFun}>退出登录</span>,
    },
  ];
  return (
    <div className={styles.header}>
      <span className={styles.title}>IT技术论坛管理系统</span>
      <Tooltip placement="left" title={'待审核数量'} >
        <Space style={{marginLeft:'auto',marginRight:'24px'}} >
            <Badge  size="small" count={unCheckNumber?.totalCount||0} onClick={() => {
              history.push('/article')
            }}>
                <i className={`iconfont icon-tongzhi ${styles.notice}`}></i>
            </Badge>
        </Space>
      </Tooltip>
      <Dropdown menu={{ items }} className={styles.user}>
        <div>
          <Space>
            {userName}
            <DownOutlined />
          </Space>
        </div>
      </Dropdown>
    </div>
  );
};
